<!--
 * @Author: wwj 3342930399@qq.com
 * @Date: 2024-03-10 19:12:10
 * @LastEditors: wwj 3342930399@qq.com
 * @LastEditTime: 2024-03-25 22:05:40
 * @FilePath: \vue\src\views\Apply\adjuest.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home">
    <div class="box-top">
      <div class="title">师生概况</div>
      <div class="content">
        <div class="content-session" id="chart-num1"></div>
        <div class="content-session" id="chart-num2"></div>
      </div>
    </div>
    <div class="box-middle">
      <div class="title">学校通知</div>
      <div class="text">
        <div class="news fade" v-for="(item, index) in newsList" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="box-bottom">
      <div class="title">教学概况</div>
      <div class="bottom-content">
        <div id="chart1"></div>
        <div id="chart2"></div>
        <div id="chart3"></div>
        <div id="chart4"></div>
        <div id="chart5"></div>
        <div id="chart6"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      peopleList: [
        {
          name: "男生",
          value: 100,
        },
        {
          name: "女生",
          value: 100,
        },
        {
          name: "教师",
          value: 100,
        },
      ],
      newsList: [
        "新闻11111111111111111111111111111111111111111111111",
        "新闻22222222222222222222222222222222222222222222",
        "新闻333333333333333333333333333333333333333333333",
        "新闻444444444444444444444444444444444444444444444",
        "新闻55555555555555555555555555555555555555555555",
        "新闻666666666666666666666666666666666666666666666666",
        "新闻7777777777777777777777777777777777777777777777",
        "新闻8888888888888888888888888888888888888888888888888",
        "新闻999999999999999999999999999999999999999999999",
        "新闻11111111111111111111111111111111111111111111111",
      ],
    };
  },
  methods: {
    getPeopleDate1() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart-num1").onmouseenter = null;
        document
          .getElementById("chart-num1")
          .removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart-num1");
        let myChart = echarts.init(idName);

        var option = {
          grid: {
            top: "5%",
            bottom: "5%",
            containLabel: true,
          },
          title: {
            x: "center",
          },
          backgroundColor: "#fff",
          tooltip: {
            trigger: "item",
          },
          xAxis: {
            data: ["男生", "女生", "教师"],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#888",
              },
              margin: 10, //刻度标签与轴线之间的距离。
            },
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                color: "#eee",
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#888",
              },
            },
          },
          series: [
            {
              type: "pictorialBar",
              symbolSize: [50, 18],
              symbolOffset: [0, -10],
              z: 12,
              symbolPosition: "end",
              itemStyle: {
                normal: {
                  color: "#d7ebcb",
                },
              },
              data: [100, 50, 20],
            },
            {
              type: "pictorialBar",
              symbolSize: [50, 18],
              symbolOffset: [0, 10],
              z: 12,
              itemStyle: {
                normal: {
                  color: "#69c37b",
                },
              },
              data: [100, 50, 20],
            },
            {
              type: "bar",
              itemStyle: {
                normal: {
                  color: "#69c37b",
                },
              },
              barWidth: 50,
              data: [100, 50, 20],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getPeopleDate2() {
      // let res = apiGetZhxxZdgz();
      // console.log(res);
      // const data = res.data.map((item) => item.value);
      // const axisData = res.data.map((item) => item.name);

      this.$nextTick(() => {
        document.getElementById("chart-num2").onmouseenter = null;
        document
          .getElementById("chart-num2")
          .removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart-num2");
        let myChart = echarts.init(idName);

        var maxData = [49, 52, 30, 60, 90, 30, 50, 70, 40];
        var xData = [
          "1年级1班",
          "1年级2班",
          "1年级3班",
          "2年级1班",
          "2年级2班",
          "2年级3班",
          "3年级1班",
          "3年级2班",
          "3年级3班",
        ];

        // var maxData = data; // 只取前五条数据
        // var xData = axisData; // 只取前五条数据

        for (let i = 0; i < maxData.length; i++) {
          maxData[i] = {
            value: maxData[i],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#3b9ccf",
                },
                {
                  offset: 1,
                  color: "#00feff",
                },
              ]),
            },
          };
        }

        var option = {
          grid: {
            top: "5%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            show: false,
            type: "value",
            axisLabel: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            data: xData.slice(0, 5), // 仅显示前五条数据
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: "#7DFFFD",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#000",
            },
          },
          series: [
            {
              type: "bar",
              zlevel: 1,
              label: {
                show: true,
                fontSize: 12,
                position: [290, 0],
                formatter: "{c}人",
              },
              barWidth: 8,
              itemStyle: {
                color: "#fff",
              },
              data: maxData.slice(0, 5), // 仅显示前五条数据
            },
          ],
        };

        setInterval(() => {
          // 确保数组长度足够
          const tempMaxData = maxData.shift(); // 移除第一个数据
          maxData.push(tempMaxData); // 添加新的数据到末尾

          const tempXData = xData.shift(); // 移除第一个数据
          xData.push(tempXData); // 添加新的数据到末尾

          myChart.setOption({
            yAxis: {
              data: xData.slice(0, 5), // 仅显示前五条数据
            },
            series: [
              {
                data: maxData.slice(0, 5), // 仅显示前五条数据
              },
            ],
          });
        }, 1000);

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getChartData1() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart1").onmouseenter = null;
        document.getElementById("chart1").removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart1");
        let myChart = echarts.init(idName);

        let index = 0;
        var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A"];
        function fun() {
          var timer = setInterval(function () {
            myChart.dispatchAction({
              type: "hideTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 显示提示框
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index == 0 ? 5 : index - 1,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: index,
            });
            index++;
            if (index > 5) {
              index = 0;
            }
          }, 3000);
        }

        fun();
        setTimeout(function () {
          fun();
        }, 5000);
        var option = {
          title: {
            text: "语文",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["24%", "45%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-30, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              data: [
                {
                  name: "不及格",
                  value: 20,
                },
                {
                  name: "一般",
                  value: 50,
                },
                {
                  name: "良好",
                  value: 20,
                },
                {
                  name: "优秀",
                  value: 10,
                },
              ],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getChartData2() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart2").onmouseenter = null;
        document.getElementById("chart2").removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart2");
        let myChart = echarts.init(idName);

        let index = 0;
        var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A"];
        function fun() {
          var timer = setInterval(function () {
            myChart.dispatchAction({
              type: "hideTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 显示提示框
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index == 0 ? 5 : index - 1,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: index,
            });
            index++;
            if (index > 5) {
              index = 0;
            }
          }, 3000);
        }

        fun();
        setTimeout(function () {
          fun();
        }, 5000);
        var option = {
          title: {
            text: "数学",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["24%", "45%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-30, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              data: [
                {
                  name: "不及格",
                  value: 20,
                },
                {
                  name: "一般",
                  value: 50,
                },
                {
                  name: "良好",
                  value: 20,
                },
                {
                  name: "优秀",
                  value: 10,
                },
              ],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getChartData3() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart3").onmouseenter = null;
        document.getElementById("chart3").removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart3");
        let myChart = echarts.init(idName);

        let index = 0;
        var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A"];
        function fun() {
          var timer = setInterval(function () {
            myChart.dispatchAction({
              type: "hideTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 显示提示框
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index == 0 ? 5 : index - 1,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: index,
            });
            index++;
            if (index > 5) {
              index = 0;
            }
          }, 3000);
        }

        fun();
        setTimeout(function () {
          fun();
        }, 5000);
        var option = {
          title: {
            text: "英语",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["24%", "45%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-30, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              data: [
                {
                  name: "不及格",
                  value: 20,
                },
                {
                  name: "一般",
                  value: 50,
                },
                {
                  name: "良好",
                  value: 20,
                },
                {
                  name: "优秀",
                  value: 10,
                },
              ],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getChartData4() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart4").onmouseenter = null;
        document.getElementById("chart4").removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart4");
        let myChart = echarts.init(idName);

        let index = 0;
        var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A"];
        function fun() {
          var timer = setInterval(function () {
            myChart.dispatchAction({
              type: "hideTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 显示提示框
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index == 0 ? 5 : index - 1,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: index,
            });
            index++;
            if (index > 5) {
              index = 0;
            }
          }, 3000);
        }

        fun();
        setTimeout(function () {
          fun();
        }, 5000);
        var option = {
          title: {
            text: "科学",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["24%", "45%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-30, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              data: [
                {
                  name: "不及格",
                  value: 20,
                },
                {
                  name: "一般",
                  value: 50,
                },
                {
                  name: "良好",
                  value: 20,
                },
                {
                  name: "优秀",
                  value: 10,
                },
              ],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getChartData5() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart5").onmouseenter = null;
        document.getElementById("chart5").removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart5");
        let myChart = echarts.init(idName);

        let index = 0;
        var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A"];
        function fun() {
          var timer = setInterval(function () {
            myChart.dispatchAction({
              type: "hideTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 显示提示框
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index == 0 ? 5 : index - 1,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: index,
            });
            index++;
            if (index > 5) {
              index = 0;
            }
          }, 3000);
        }

        fun();
        setTimeout(function () {
          fun();
        }, 5000);
        var option = {
          title: {
            text: "道德与法治",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 12,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["24%", "45%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-30, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              data: [
                {
                  name: "不及格",
                  value: 20,
                },
                {
                  name: "一般",
                  value: 50,
                },
                {
                  name: "良好",
                  value: 20,
                },
                {
                  name: "优秀",
                  value: 10,
                },
              ],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    getChartData6() {
      this.showChart = true;
      this.$nextTick(() => {
        document.getElementById("chart6").onmouseenter = null;
        document.getElementById("chart6").removeAttribute("_echarts_instance_");
        let idName = document.getElementById("chart6");
        let myChart = echarts.init(idName);

        let index = 0;
        var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A"];
        function fun() {
          var timer = setInterval(function () {
            myChart.dispatchAction({
              type: "hideTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 显示提示框
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: index,
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index == 0 ? 5 : index - 1,
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: index,
            });
            index++;
            if (index > 5) {
              index = 0;
            }
          }, 3000);
        }

        fun();
        setTimeout(function () {
          fun();
        }, 5000);
        var option = {
          title: {
            text: "体育",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["24%", "45%"],
              clockwise: true,
              avoidLabelOverlap: true,
              hoverOffset: 15,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return colorList[params.dataIndex];
                  },
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                  a: {
                    padding: [-30, 15, -20, 15],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    width: 1,
                  },
                },
              },
              data: [
                {
                  name: "不及格",
                  value: 20,
                },
                {
                  name: "一般",
                  value: 50,
                },
                {
                  name: "良好",
                  value: 20,
                },
                {
                  name: "优秀",
                  value: 10,
                },
              ],
            },
          ],
        };

        window.addEventListener("resize", function () {
          myChart.resize();
        });
        myChart.setOption(option);
      });
    },
    scrollUp() {
      const firstItem = this.newsList.shift(); // 移除第一个元素
      this.newsList.push(firstItem); // 将移除的元素添加到末尾
    },
  },
  mounted() {
    this.getPeopleDate1();
    this.getPeopleDate2();
    this.getChartData1();
    this.getChartData2();
    this.getChartData3();
    this.getChartData4();
    this.getChartData5();
    this.getChartData6();
    setInterval(() => {
      this.scrollUp();
    }, 2000); // 每隔2秒滚动一次，可以根据需要调整时间间隔
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .box-top {
    width: 70%;
    height: 30%;
    position: relative;
    .content {
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .content-session {
        width: 40%;
        height: 150px;
        margin-top: 10px;
        border-radius: 10px;
        background: radial-gradient(
          circle at 10% 20%,
          rgb(239, 246, 249) 0%,
          rgb(206, 239, 253) 90%
        );
        text-align: center;
        line-height: 100px;
      }
    }
  }
  .box-middle {
    width: 30%;
    height: 30%;
    position: relative;
    .text {
      width: 100%;
      height: 90%;
      overflow: hidden;
      .news {
        margin: 10px 28px;
        border-bottom: 1px dashed #ccc;
        overflow: hidden; /* 设置溢出隐藏 */
        text-overflow: ellipsis; /* 设置显示省略号 */
        white-space: nowrap; /* 防止换行 */
      }
    }
  }
  .box-bottom {
    width: 100%;
    height: 70%;
    position: relative;
    .bottom-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      div {
        width: 32%;
        height: 230px;
        background-color: rgb(239, 246, 249);
        border-radius: 10px;
      }
    }
  }
}
.title {
  color: #fff;
  padding-left: 50px;
  background: linear-gradient(-210deg, transparent 1.5em, #01dfe3 0);

  &::before {
    content: "";
    display: block;
    width: 1.73em;
    height: 3em;
    position: absolute;
    background: linear-gradient(-60deg, #577b98 50%, transparent 0);
    left: -3px;
    top: 0;
    border-bottom-left-radius: inherit;
    transform: translateY(-0.5em) rotate(30deg);
    transform-origin: bottom right;
    box-shadow: 0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
  }
}
</style>
